<template>
	<view class="mine">
		<view
			class="statusBar"
			:style="{ height: titleBarHeight + 'px' }"
		></view>
		<view class="my-info">
			<view class="avatar">
				<u-avatar
					:src="avatarSrc"
					size="50"
				></u-avatar>
			</view>
			<view class="text">
				<view class="big">
					<text
						v-if="!userInfo"
						@click="toLogin"
					>
						点击此处进行登录
					</text>
					<text
						v-else-if="!userInfo.nickname"
						@click="setNickName"
					>
						点击此处设置昵称
					</text>
					<text
						v-else=""
						class="username"
					>
						{{ userInfo.nickname }} {{ sayHello }}
					</text>
				</view>

				<view class="small">欢迎光临~</view>
			</view>
			<view
				class="arrow"
				@click="showLogoutPopup"
			>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="my-func">
			<view class="title">我的功能</view>
			<view
				class="item"
				@click="toOrder"
			>
				<span class="icon iconfont icon-dingdan"></span>
				<view class="text">订单信息</view>
			</view>
			<view
				class="item"
				@click="toUserInfo"
			>
				<span class="icon iconfont icon-wode"></span>
				<view class="text">个人资料</view>
			</view>
			<view
				class="item"
				v-if="ManageState()"
				@click="toManage"
			>
				<span class="icon iconfont icon-wode"></span>
				<view class="text">后台管理</view>
			</view>
		</view>
		<uni-popup
			ref="userInfoPopup"
			type="dialog"
		>
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="输入姓名"
				value=""
				placeholder="请输入您的姓名"
				@confirm="dialogInputConfirm"
			></uni-popup-dialog>
		</uni-popup>

		<uni-popup
			ref="logoutPopup"
			type="bottom"
		>
			<view class="logoutPopup">
				<view
					class="logout"
					@click="logout"
				>
					退出登录
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
const mineCloudObj = uniCloud.importObject('my-mall-mine');
export default {
	data() {
		return {
			avatarSrc: '/static/images/avatar.jpg',
			userInfo: {},
			nickName: '',
			value: ''
		};
	},
	onLoad() {
		console.log(uniCloud.getCurrentUserInfo());
		this.getUserInfo();
	},
	computed: {
		...mapGetters(['titleBarHeight']),
		sayHello() {
			const now = new Date();
			const hour = now.getHours();
			let period;
			if (hour < 9) {
				period = '早上';
			} else if (hour < 11) {
				period = '上午';
			} else if (hour < 13) {
				period = '中午';
			} else if (hour < 17) {
				period = '下午';
			} else {
				period = '晚上';
			}
			return `${period}好！`;
		}
	},
	methods: {
		toOrder() {
			uni.switchTab({
				url: '/pages/order/order'
			});
		},
		showDetail() {},
		// 获取当前用户信息
		getUserInfo() {
			mineCloudObj.getUserInfo().then((res) => {
				this.userInfo = res;
			});
		},
		showUserInfoPop() {
			this.$refs.userInfoPopup.open();
		},
		toLogin() {
			uni.navigateTo({
				url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
			});
		},
		// 设置昵称
		setNickName() {
			this.$refs.userInfoPopup.open();
		},
		async dialogInputConfirm(val) {
			if (val) mutations.updateUserInfo({ nickname: val });
		},
		toUserInfo() {
			uni.navigateTo({
				url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
			});
		},
		showLogoutPopup() {
			this.$refs.logoutPopup.open();
		},
		logout() {
			mutations.logout();
		},
		toManage() {
			uni.navigateTo({
				url: '/pages_manage/index/index'
			});
		},
		ManageState() {
			return uniCloud.getCurrentUserInfo().role.includes('manage');
		}
	}
};
</script>

<style lang="scss">
.mine {
	height: calc(100vh - 50px);
	/* #ifdef MP-WEIXIN */
	height: 100vh;
	/* #endif */
	background-color: $theme-back-color;
	padding: 30rpx;
	.my-info {
		display: flex;
		align-items: center;
		height: 150rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
		border-radius: 8px;
		padding: 30rpx;
		.avatar {
			margin-right: 30rpx;
		}
		.text {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.big {
				font-size: 36rpx;
				color: #444;
			}
			.small {
				font-size: 24rpx;
				color: #777;
			}
		}
		.arrow {
			width: 50rpx;
			@include flex-box-set();
		}
	}
	.my-func {
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
		border-radius: 8px;
		padding: 30rpx 30rpx 10rpx;
		margin-top: 30rpx;
		.title {
			margin-bottom: 20rpx;
			font-size: 34rpx;
		}
		.item {
			display: flex;
			align-items: center;
			height: 90rpx;
			border-bottom: 1rpx solid #eee;
			.icon {
				font-size: 45rpx;
				margin-right: 20rpx;
			}
			.text {
			}
			&:last-child {
				border: none;
			}
		}
	}
	.logoutPopup {
		width: 100%;
		background-color: $theme-back-color;
		height: 300rpx;
		padding: 30rpx 30rpx calc(50px + 30rpx);
		/* #ifdef MP-WEIXIN */
		height: 200rpx;
		padding: 30rpx;
		/* #endif */
		border-radius: 15rpx 15rpx 0 0;

		@include flex-box();
		.logout {
			width: 100%;
			text-align: center;
			padding: 20rpx 0;
			background-color: #fff;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.07);
			border-radius: 12rpx;
		}
	}
}
</style>
